<template>
    <div>
        <n-flex :size="12" :wrap="false">
            <n-list clickable hoverable bordered>
                <template #header>流水线目录</template>
                <!--                <template #footer>共 {{ state.pipelines.length }} 条数据</template>-->
                <n-list-item v-for="(item, index) in sseStore.pipeline_list" :key="index"
                             @click="pipelineClicked(item)">
                    <n-thing style="width: 220px">
                        <template #header>
                            {{ item.name }}
                        </template>
                        <template #header-extra>
                            <PipelineState :item="item"/>
                        </template>
                    </n-thing>
                </n-list-item>
            </n-list>
            <n-data-table
                size="medium"
                :columns="columns"
                :data="sseStore.webhook_list"
                :pagination="pagination"
            />
        </n-flex>
        <LogView :show="show" :width="1000"/>
<!--        <n-drawer v-model:show="show" :width="1000" :close-on-esc="true">-->
<!--            <n-drawer-content>-->
<!--                <template #header>-->
<!--                    {{ webhook.created_at }}-->
<!--                </template>-->
<!--                <LogView :webhookId="webhook.id"/>-->
<!--            </n-drawer-content>-->
<!--        </n-drawer>-->
    </div>


</template>

<script setup lang="ts">
import {NButton} from 'naive-ui'
import {h, nextTick, onMounted, reactive, ref, watch, watchEffect} from "vue";
import {getPipelineList, getWebhooksByPipelineId} from "@/api/pm/pipeline.ts";
import {PipelineState} from "@/components/PipelineState/index.ts"
import {useSseStore} from "@/stores";
import LogView from "@/views/pm/webhook/components/LogView.vue";
//
// function log() {
//     const l: string[] = []
//     for (let i = 0; i < 10; ++i) {
//         l.push(Math.random().toString(16))
//     }
//     return `${l.join('\n')}\n`
// }

const sseStore = useSseStore()
const state = reactive({
    query: {
        keyword: ''
    },
})
const lines = ref([])
// const logRef = ref(log());
const logInstRef = ref(null);
// const startRef = ref(false);
// const timerRef = ref(null);



const webhook = ref({})
// error,process,wait,finish
const currentStatus = ref('wait')
const current = ref(0)
let show = ref(false)

const columns = [
    {
        title: '状态',
        key: 'status',
        width: 80,
        render(row) {
            return h(
                PipelineState,
                {
                    item: row,
                }
            )
        }
    },
    {
        title: '时间',
        key: 'created_at',
        width: 240
    },
    {
        title: 'Source',
        key: 'source',
    },
    {
        title: '操作',
        key: 'action',
        width: 100,
        align: "right",
        titleAlign: 'right',
        fixed: 'right',
        render(row) {
            return h(
                NButton,
                {
                    size: 'small',
                    style: {
                        marginLeft: '3px'
                    },
                    ghost: true,
                    type: "primary",
                    bordered: true,
                    tooltip: '查看日志',
                    onClick: () => {
                        webhook.value = row
                        show.value = true
                    }
                },
                {default: () => '查看日志'}
            )
        }
    }
]

const pagination = {
    pageSize: 10
}

const getDataList = () => {
    getPipelineList().then(res => {
        sseStore.pipeline_list = res.data
    })
}

const pipelineClicked = (item) => {
    console.log(item)
    getWebhooksByPipelineId(item.id).then(res => {
        sseStore.webhook_list = res.data
    })
}


onMounted(() => {
    getDataList()

    // setInterval(() => {
    //     lines.value.push(new Date().toLocaleString() + ":" + randomString(20) + "\r")
    //     }, 1000
    // )
    // nextTick(() => {
    //     logInstRef.value?.scrollTo({ position: "bottom", silent: true });
    // });
    //
    // watchEffect(() => {
    //     if (lines.value) {
    //         console.log(lines.value.length)
    //         // console.log(logInstRef.value)
    //         nextTick(() => {
    //             logInstRef.value?.scrollTo({ position: "bottom", silent: true });
    //         });
    //     }
    // });
})

</script>

<style scoped lang="scss">
.log_view {
    //height: 600px;
    overflow: scroll;
    height: calc(100% - 100px);
}

.n-drawer .n-drawer-content.n-drawer-content--native-scrollbar .n-drawer-body-content-wrapper {
    overflow-y: hidden !important;
}
</style>
